<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="pc/include :: header('充值')" />

    <link th:href="@{/js/ui-table/ui-table.css}" rel="stylesheet"/>
</head>
<body>
<th:block th:include="pc/include :: top" />
<div class="iw">
    <div class="crumbs">
        <p>当前位置：<a href="/">首页</a> > <a href="/user/center">个人中心</a> > 现金充值</p>
    </div>
    <div class="center_left">
        <th:block th:include="pc/include :: menu" />
    </div>
    <div class="center_right">
        <h1 class="vip_head">充值</h1>
        <div class="vip_stepzero unselect">
            <h3>1.充值(<span th:text="${tradeset.glodname}" th:remove="tag"></span>)</h3>
            <div class='ui-text-group'>
                <input id="glods" name="glods" type="number" th:value="${tradeset.glodin/tradeset.glodrate}" class="ui-text" data-valid data-must="必须输入数量" data-reg="^\d*$" data-reg-msg="请输入正确数量" th:attr="data-min=${tradeset.glodin/tradeset.glodrate}"/><span></span>
                <lable>请输入充值数量</lable>
            </div>
        </div>
        <div class="vip_steptwo">
            <h3>2.请选择以下方式支付</h3>
            <div th:each="item :${paysetlist}" th:remove="tag">
                <div th:if="${item.id==1} and ${item.state==1}" class="weipay active">
                    <i></i>
                    <img alt="二扫码支付" th:src="@{/img/weipay.png}" />
                </div>
                <div th:if="${item.id==2} and ${item.state==1}" class="alipay">
                    <i></i>
                    <img alt="二扫码支付" th:src="@{/img/alipay.png}" />
                </div>
            </div>
        </div>
        <div class="vip_stepthr">
            <h3>3.请支付金额 <span id="vip_cash">¥ <span th:text="${tradeset.glodin}" th:remove="tag"></span></span> 元</h3>
            <div th:each="item :${paysetlist}" th:remove="tag">
                <div  th:if="${item.id==1} and ${item.state==1}" class="weipayma">
                    <img alt="二扫码支付" th:src="@{/weipay2.html(cash=${tradeset.glodin/tradeset.glodrate})}" />
                    <span><i></i>使用微信扫码付款</span>
                </div>
                <div th:if="${item.id==2} and ${item.state==1}" class="alipayma" style="display:none">

                    <div th:if="${isewm}" th:remove="tag">
                        <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" scrolling="no" th:src="@{alipay2.html(cash=${tradeset.glodin/tradeset.glodrate})}"></iframe>
                        <span><i></i>支付宝扫码付款</span>
                    </div>

                    <a th:if="${isewm}==0" class="ui-btn ui-btn-blue" target="_blank" th:href="@{alipay.html(cash=${tradeset.glodin/tradeset.glodrate})}">点击付款</a>

                </div>
            </div>
        </div>
    </div>
</div>
<?php $this->load->view($template . 'footer'); ?>
<script>
    $(function() {
        var id = [(${tradeset.glodin/tradeset.glodrate})]
        $("#glods").change(function(){
            id = $(this).val();
            $("#vip_cash").text('¥' + (id * Number('[(${tradeset.glodrate})]')).toFixed(2));
            $(".weipayma img").attr("src", "/weipay2.html?cash="+id);
            $(".alipayma img,.alipayma iframe").attr("src", "/alipay2.html?cash="+id);
            $(".alipayma a").attr("href", "/alipay2.html?cash="+id);
            i = 100;
        });

        $(".vip_steptwo div").click(function() {
            $this = $(this);
            $(".vip_steptwo > div").removeClass("active");

            $(".vip_stepthr > div").hide();
            $("." + $this.attr("class") + "ma").show();

            $this.addClass("active");
        });

        setInterval(function() {
            $.get("/user/glodpaystate/" + id, function(data) {
                if (data) {
                    window.location.href = "/user/glodpayfinish/" + data;
                }
            });
        },3000);  

        //perper
        var i = 100;
        var set = setInterval(function() {
            if (i > 0) {
                $("span.per ii").text(i--);
            } else {
                window.clearInterval(set);
                $(".weipayma .olded,.alipayma .olded").show();
                $(".weipayma span.per,.alipayma span.per").html('<i></i>已过期，重新刷新页面');    
            }
        }, 1000);
    });
</script>